<template>
  <div :class="{
    'top-part': true,
    'top-part-dark': isDarkTheme,
    'top-part-light': !isDarkTheme,
  }">
    <div 
      v-for="(item, index) in dataList"
      :key="index"
      class="item-box">
      <div class="item" @click="handleOpenRobotOnline(item)">
        <img src="../css/robot-icon-dark.png" alt="">
        <div class="item-text">
          <div> <span class="totalNum">{{ item.total }}</span>  个</div> 
          <span class="nameText"> {{ item.robotName }} </span>
          <span class="decText"> {{ item.description }} </span>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  props: {
    pageConfig: Object
  },
  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  data() {
    return {
      dataList: [
        {
          total: 100,
          robotName: '初审机器人',
          description: '涉及8个经济事项'
        },
        {
          total: 200,
          robotName: '制证机器人',
          description: '涉及18个经济事项'
        },
        {
          total: 300,
          robotName: '流程机器人',
          description: '涉及10个经济事项'
        }
      ]
    }
  },
  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  methods: {
    handleOpenRobotOnline(item) {
      this.$emit('handleOpenRobotOnline', item)
    }
  }

}
</script>

<style lang="less" scoped>
  .top-part {
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .top-part-dark {
    background: url('../css/robot-bg-dark.png') no-repeat;
    background-size: 100% 100%;
    font-size: 14px;
    .item-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
          width: 35%;
        }
        .item-text {
          color: #fff;
          display: flex;
          flex-direction: column;
          .totalNum {
            color: #fff;
            font-size: 18px;
            font-family: "TCloudNumber";
            text-shadow: 0 0 8px #f5e74f80;
            letter-spacing: 0.8px;
            background: linear-gradient(180deg, #FFF 32.93%, #F5E74F 82.93%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .nameText {
            color: #fff;
          }
          .decText {
            color: #fff;
            text-shadow: 0 2px 8px #051c376b, 0 0 7px #4bb4e5b0;
            letter-spacing: 0.42px;
            // background: linear-gradient(180deg, #fff 32.93%, #4bb4e5b0 82.93%);
            background-clip: text;
            -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
          }
        }
        
      }
    }

  }
  .top-part-light {
    background-color: #fff;
  }


// 2K
@media screen and (max-width: 2560px) {
   .top-part {
    font-size: 18px;
    .item-box {
      .item {
        img {
          width: 40%;
        }
        .item-text {
          .totalNum {
            font-size: 36px;
          }
        }
      }
    }
  }
}
// 全高清屏幕
@media screen and (max-width: 1920px) {
  .top-part {
    font-size: 14px;
    .item-box {
      .item {
        img {
          width: 35%;
        }
        .item-text {
          .totalNum {
            font-size: 18px;
          }
        }
      }
    }
  }
}

</style>